import React from 'react'
import '../css/game.css'

class Square extends React.Component{
    render() {
        return (
            <button className='square-btn'
                onClick={() => this.props.onClick()}>{this.props.value}</button>
        )
    }
}

class Board extends  React.Component{
    renderSquare(i){
        return (
            <Square value={this.props.value[i]} onClick={() => this.props.onClick(i)}></Square>
        );
    }

    render(){
        return (
            <ul>
                <li>
                    {this.renderSquare(0)}
                    {this.renderSquare(1)}
                    {this.renderSquare(2)}
                    {this.renderSquare(3)}
                    {this.renderSquare(4)}
                </li>
                <li>
                    {this.renderSquare(5)}
                    {this.renderSquare(6)}
                    {this.renderSquare(7)}
                    {this.renderSquare(8)}
                    {this.renderSquare(9)}
                </li>
                <li>
                    {this.renderSquare(10)}
                    {this.renderSquare(11)}
                    {this.renderSquare(12)}
                    {this.renderSquare(13)}
                    {this.renderSquare(14)}
                </li>
                <li>
                    {this.renderSquare(15)}
                    {this.renderSquare(16)}
                    {this.renderSquare(17)}
                    {this.renderSquare(18)}
                    {this.renderSquare(19)}
                </li>
                <li>
                    {this.renderSquare(20)}
                    {this.renderSquare(21)}
                    {this.renderSquare(22)}
                    {this.renderSquare(23)}
                    {this.renderSquare(24)}
                </li>
            </ul>
        );
    }
}

class Game extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            nextIs:true,
            squares:Array(25).fill(null)
        }
    }

    handleClick(i){
        let winner = this.calculatorWinner(this.state.squares);
        if(winner){
            return;
        }else{
            let square = this.state.squares.slice();
            square[i] = (this.state.nextIs?'X':'O');
            this.setState({
                nextIs:!this.state.nextIs,
                squares:square
            });
        }
    }

    /*计算获胜方*/
    calculatorWinner(squares){
        let lines = [
            [0,1,2,3,4],
            [5,6,7,8,9],
            [10,11,12,13,14],
            [15,16,17,18,19],
            [20,21,22,23,24],
            [0,5,10,15,20],
            [1,6,11,16,21],
            [2,7,12,17,22],
            [3,8,13,18,23],
            [4,9,14,19,24],
            [0,6,12,18,24],
            [4,8,12,16,20]
        ];
        for(let i=0,len=lines.length;i<len;i++){
            let [a,b,c,d,e] = lines[i];
            let sa = squares[a],
                sb = squares[b],
                sc = squares[c],
                sd = squares[d],
                se = squares[e];
            if(sa && sa===sb && sa===sc && sa===sd && sa===se){
                return squares[i];
            }
            return false;
        }

    }

    render(){
        let status = "";
        let winner = this.calculatorWinner(this.state.squares);
        if(winner){
            status = "Congratulations! Winner is "+winner;
        }else{
            status =  "Next player is "+(this.state.nextIs?'X':'O');
        }
        return (
            <div>
                <header>五子棋</header>
                <p className='status'>{status}</p>
                <Board value={this.state.squares} onClick={(i) => this.handleClick(i)}/>
            </div>
        )
    }
}

export default Game;